<template>
	<!-- 自提订单 -->
	<view>
		<view class="tab">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-green ':''" v-for="(item,index) in tab" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-y="true" class="screen-swiper" @scrolltolower="scrolltolower">
			<view class="list" v-for="(item,index) in list" :key="index" @click="navigate(item.id,index)">
				<!-- (item.status==4?4:item.status==5?4:item.status==-2?4:item.status) -->
				<view v-if="istrue==111?true: item.status == istrue" class="bg-white list_div">
					<view class="item flex " v-for="(i,t) in item.goods" :key="t" style="margin-bottom: 10rpx;">
						<view class="image">
							<image :src="url+i.main_image" mode=""></image>
						</view>
						<view class="text_div">
							<view class="text flex justify-between">
								<text>{{i.title}}</text>
								<text class="state" v-if="t== 0">
								{{item.status==0?'待支付':item.status==1?'已支付':item.status==2?'配送中':item.status==3?'已完成(待评价)'
								:item.status==4?'退款中':item.status==5?'退款完成':item.status==6?'已支付':item.status==7?'已评价':item.status==-1?'已取消':'拒绝退款'}}
								</text>
							</view>
							<text class="gauge" v-show="i.attribute">{{i.spec_name}}：{{i.spec_item_name}}</text>
							<text class="gauge" v-if="item.service.items[0].name" >服务内容：{{item.service.items[0].name}}</text>
							<view class="yuanjia">原价:￥{{i.price}}</view>	
							<view class="flex justify-between text_span">
								<text :class="{ccc:item.status==3}">会员价:￥{{i.vip_price}} | 积分最多抵扣￥{{i.point_price}}</text>
								<text class="num">x{{i.number}}</text>
							</view>
						</view>
					</view>
					<view class="item2">
						<view class="Subtotal">
							<text class="num">共{{item.goods.length}}件</text>
							<text class="xiao">小计：</text>
							<text class="numbar">￥{{item.discount_method==0?item.amount:item.discount_method==1?item.point_amount:item.vip_amount}}</text>
						</view>
					</view>
					<view class="flex justify-end">
						<view class="button" v-if="item.status == 0">取消订单</view>
						<view class="button button2"  v-if="item.status == 0">立即付款</view>
						<view class="button button2" v-if="item.status == 3">去评价</view>
					</view>
				</view>
			</view>
			<view class="flex-c" v-if="!isnodata" >到底了~</view>
			<nodata v-show="isnodata" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				TabCur: 0,
				istrue:111,
				scrollLeft: 0,
				tab:[
					{
						name:'全部',
						id:111
					},
					{
						name:'待支付',
						id:0
					},
					{
						name:'已支付(待自提)',
						id:6
					},
					{
						name:'已完成(待评价)',
						id:3
					},
					{
						name:'已评价',
						id:7
					},
					{
						name:'退款中',
						id:4
					},
					{
						name:'已取消',
						id:-1
					},
					{
						 // 订单状态 0待支付 6已支付(待自提/核销) 3已完成(待评价) 4退款中 5退款完成 7已评价 -1已取消 -2拒绝退款
						name:'退款完成',
						id:5
					},
					{
						name:'拒绝退款',
						id:-2
					},
				],
				list:[],
				total:0,
				last_page:1,
				page:1,
				limit:30,
				status:0,
				isnodata:0,//是否显示无数据
			};
		},
		onLoad() {
			this.url = this.$base
			this.getlist()
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.getlist(this.istrue)
		},
		methods: {
			tabSelect(e) {
				if(this.TabCur == e.currentTarget.dataset.id) return
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.istrue = this.tab[this.TabCur].id
				this.page = 1
				this.list = []
				if(this.istrue == 111){
					this.getlist()
				}else{
					this.getlist(this.istrue)
				}
				
			},
			navigate(id,i){
				console.log(id);
				uni.navigateTo({
					url:'./ZT_details?id=' + id+'&sv='+JSON.stringify(this.list[i].service)
				})
			},
			getlist(id){
				if(this.istrue == 111){
					this.$api.self_pick_list({
						page:this.page,
						limit:this.limit,
					}).then(res=>{
						console.log(res);
						uni.stopPullDownRefresh()
						this.last_page = res.last_page
						if(res.list.length !==0){
							this.isnodata = 0
							this.list = [...this.list,...res.list]
						}else{
							this.isnodata = 1
						}
					})
				}else{
					this.$api.self_pick_list({
						page:this.page,
						limit:this.limit,
						status:id
					}).then(res=>{
						console.log(res);
						uni.stopPullDownRefresh()
						this.last_page = res.last_page
						if(res.list.length !==0){
							this.isnodata = 0
							this.list = [...this.list,...res.list]
						}else{
							this.isnodata = 1
						}
					})
				}
			},
			scrolltolower(){//触底
				if(this.last_page == this.page){
					return
				}else{
					this.page++
					this.getlist()
				}
			}
		}
	}
</script>

<style lang="scss">
.screen-swiper{
	height: calc(100vh - 120rpx);
	overflow: hidden;
	.list{
		.list_div{
			width: 706rpx;
			border-radius: 20rpx;
			margin: 10rpx auto;
			padding: 26rpx 17rpx 24rpx 26rpx;
		}
		.item{
			.image{
				width: 168rpx;height: 168rpx;
				image{width: 168rpx;height: 168rpx;}
			}
			.text_div{
				flex: 1;
				margin-left: 22rpx;
				font-size: 28rpx;
				color: #333;
				.text{
					.state{
						font-size: 34rpx;
						color: #1CD699;
					}
				}
				.gauge{
					font-size: 24rpx;
					color: #999999;
				}
				.yuanjia{
					margin-top: 17rpx;
				}
				.text_span{
					color: #FF2E2E;
					font-size: 22rpx;
				}
				.num{
					font-size: 30rpx;
					color: #999;
				}
			}
		}
		.Subtotal{
			text-align: right;
			font-size: 28rpx;
			margin-top: 51rpx;
			.num{
				color: #999;
			}
			.xiao{
				color: #333;
				margin: 0 10rpx;
			}
			.numbar{
				color: #FF2E2E;
			}
		}
		.button{
			margin-top: 23rpx;
			width: 180rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 2px solid #B8B8B8;
			color: #999;
			text-align: center;
			line-height: 60rpx;
			margin-left: 20rpx;
		}
		.button2{
			border: none;
			background: #1CD699;
			color: #fff;
		}
	}
}
.tab{
	height: 96rpx;
	.cu-item{
		// margin-right: 175rpx;
	}
	.text-green{
		font-size: 30rpx;
		font-weight: bold;
	}
}
.ccc{
	color: #ccc;
}

</style>
